import React from 'react';
import {
  StyleSheet,
  View,
  TouchableOpacity,
  KeyboardAvoidingView,
} from 'react-native';
import SeatBox from './SeatBox';
import { scaleSize } from '../../utils/screen';

const SEAT_SIZE = scaleSize(100);

class EditableSeatBoxGrid extends React.Component {
  constructor(props) {
    super(props);

    const { row, column, seats } = this.props;

    this.state = {
      seats: this._rebuildSelectedSeats(row, column, seats),
    };
  }

  _rebuildSelectedSeats(row, column, seats) {
    let rebuiltSeats = new Array(row * column).fill(false);
    if (seats) {
      seats.forEach(seat => {
        const seatIndex = parseInt(seat.x) * column + parseInt(seat.y);
        rebuiltSeats[seatIndex] = true;
      });
    }

    return rebuiltSeats;
  }

  componentWillReceiveProps(nextProps) {
    if (this.props.row !== nextProps.row ||
        this.props.column !== nextProps.column) {
      const { row, column, seats } = this.nextProps;
      this.setState = {
        seats: this._rebuildSelectedSeats(row, column, seats),
      };
    }

    if (this.props.seats !== nextProps.seats) {
      const { row, column, seats } = nextProps;
      this.setState = {
        seats: this._rebuildSelectedSeats(row, column, seats),
      };
    }
  }

  transformSeatAxes(seats) {
    if (seats.length > 0) {
      const { position } = seats[0];
      let originPoint = position;

      seats.forEach((seat, index) => {
        const { position } = seat;

        if (position.x < originPoint.X) {
          originPoint.x = position.x;
        }

        if (position.y < originPoint.y) {
          originPoint.y = position.y;
        }
      });

      if (originPoint.x !== 0 || originPoint.y !== 0) {
        return seats.map((seat, index) => {
          const { position } = seat;
          return {
            ...seat,
            position: {
              x: position.x - originPoint.x,
              y: position.y - originPoint.y,
            },
          }
        });
      }
    }

    return seats;
  }

  getSelectedSeats() {
    const { row, column } = this.props;
    const { seats } = this.state;
    const selectedSeats = seats.reduce(function(accumlator, value, index) {
      if (value) {
        const y = index % column;
        const x = (index - y) / column;
        accumlator.push({ position: {x, y} });
      }

      return accumlator;
    }, []);

    return this.transformSeatAxes(selectedSeats);
  }

  changeSeatSelection(index, selected) {
    let newSeats = [ ...this.state.seats ];
    newSeats[index] = selected;
    this.setState({
      seats: newSeats
    });
  }

  renderSeatBoxes() {
    const { seats } = this.state;
    let selectedSeatsCount = 0;

    return seats.map((value, index) => {
      value && (++selectedSeatsCount);

      return (
        <SeatBox
          label={value ? selectedSeatsCount : ''}
          size={SEAT_SIZE}
          selectedStyle={{
            borderColor: '#fd265d',
            backgroundColor: 'rgba(253, 38, 93, 0.3)'
          }}
          onSelectionChange={(selected) => this.changeSeatSelection(index, selected)}
          key={index}
          defaultValue={value}
        />
      );
    });
  }

  render() {
    const { row, column } = this.props;
    const gridWidth = column * SEAT_SIZE;
    const gridHeight = row * SEAT_SIZE;

    return (
      <View style={{width: gridWidth, height: gridHeight}}>
        <View style={styles.gridWrapper}>
          {this.renderSeatBoxes()}
        </View>
      </View>
    );
  }
};

/* StyleSheet =============================================================== */

const styles = StyleSheet.create({
  gridWrapper: {
    flex: 1,
    flexDirection: 'row',
    flexWrap: 'wrap'
  },
});

export default EditableSeatBoxGrid;
